<template>
  <main-box>
    <PlusSearch
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData(true)"
      @reset="handleRest"
    >
      <template #plus-field-isLabel>
        <el-radio-group v-model="queryform.isLabel">
          <el-radio-button label="全部" :value="-1" />
          <el-radio-button label="有标签" :value="1" />
          <el-radio-button label="无标签" :value="2" />
        </el-radio-group>
      </template>
      <template #plus-field-warehouseId>
        <chooseWarehouse v-model="queryform.warehouseId" />
      </template>
    </PlusSearch>
    <div class="mb-2">
      <btnExport
        :queryform="getParam"
        :exportApi="exportApi"
        downloadName="工具数据"
      />
    </div>
    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
    >
      <template #picUrl="{ row }">
        <el-image
          v-for="(item, index) in getArr(row.picUrl)"
          :key="index"
          style="width: 50px; max-width: 100%; height: 50px"
          :src="item"
          :preview-src-list="getArr(row.picUrl)"
          :preview-teleported="true"
          :initial-index="index"
          class="mr-1"
        />
      </template>
      <template #action="{ row }">
        <el-button type="primary" link @click="goDetail(row)">查看</el-button>
      </template>
    </PureTable>
  </main-box>
</template>
<script setup lang="tsx">
import { ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import { useRouter } from "vue-router";

import { listApi, exportApi } from "@/api/too";
import btnExport from "@/components/btnExport/index.vue";

import { useMultiTagsStoreHook } from "@/store/modules/multiTags";

import chooseWarehouse from "@/components/choose-warehouse/index.vue";

import dict from "@/utils/dict";
/* 查询表单 */
const formConfig: PlusColumn[] = [
  {
    label: "标签",
    prop: "isLabel"
  },
  {
    label: "工具室",
    prop: "warehouseId"
  },
  {
    label: "查询",
    prop: "searchValue",
    fieldProps: { placeholder: "物品名称/编号/型号" }
  }
];
type QueryForm = {
  isLabel: string | number;
  warehouseId: string | number;
  searchValue: string;
  pageSize?: number;
  pageNum?: number;
};
const queryform = ref<QueryForm>({
  isLabel: -1,
  warehouseId: "",
  searchValue: ""
});

const handleRest = () => {
  initData(true);
  queryform.value.isLabel = -1;
};
/* 处理数据 */
const getParam = () => {
  const params: QueryForm = {
    ...queryform.value
  };
  if (Number(params.isLabel) < 0) {
    params.isLabel = "";
  }
  return params;
};

/* 表格数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  {
    label: "物件图片",
    prop: "picUrl",
    slot: "picUrl"
  },
  { label: "物件编号", prop: "code" },
  { label: "物件名称", prop: "name" },
  { label: "物件型号", prop: "modelName" },
  { label: "标签编码", prop: "labelCode" },
  { label: "工具室", prop: "warehouseName" },
  { label: "存放位置", prop: "storageLocation" },
  {
    label: "库存状态",
    prop: "storageState",
    cellRenderer: ({ row }) => {
      const target = dict.storageState(row.storageState);
      return <el-tag type={target.type}>{target.name}</el-tag>;
    }
  },

  { label: "定检周期(天)", prop: "inspectCycle" },
  { label: "借出期限(小时)", prop: "maxLendTime" },
  { label: "操作", prop: "action", fixed: "right", slot: "action" }
];

const initData = (needInit = true) => {
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params: QueryForm = {
    ...queryform.value,
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize
  };
  if (Number(params.isLabel) < 0) {
    params.isLabel = "";
  }
  listApi(params).then(res => {
    tableData.value = [...res.rows];
    pagination.total = Number(res.total);
  });
};
initData();

const Router = useRouter();
const goDetail = row => {
  const query = {
    path: "/tools/detail",
    query: { id: String(row.toolId) },
    name: "ToolDetailIndex"
  };
  useMultiTagsStoreHook().handleTags("push", {
    ...query,
    meta: {
      title: "工具详情",
      dynamicLevel: 1
    }
  });
  Router.push(query);
};

/* 把字符串转为数组 */
const getArr = (str: any = "") => {
  return str ? str.split(",") : [];
};
</script>
